import React,{Component} from 'react'
import {Form,Input,Button,Select} from 'antd'
import {inject, observer} from 'mobx-react'
import  './index.less'
const {Option} = Select
const {Item} = Form


/**
 * 名称：标签添加表单
 * 描述：标签添加表单
 * 调用：标签添加
 * 输入： 
 * 时间：20221124
 */
 @inject('tagStore')
 @observer
class AssetTagAddForm extends Component{
    /**
     * 提交按钮
     * 描述：提交后进行搜索
     * @param {*} e 
     */
    handleSubmit = e=> {
        e.preventDefault()
        const form  = this.props.form
        const {tagStore,handleSubmitMethod} = this.props
        form.validateFields(async (err, values) => {
            if(!err){
                console.log("Received:",values)
                handleSubmitMethod(values)
            } else {
                // alert("用户名或密码输入错误")
            }
        }
        )

    }

    render (){
        
        const {getFieldDecorator} = this.props.form
        return (
            <Form onSubmit={this.handleSubmit} className="form" layout="inline" >
                    <Item  name="cateName" label="类目信息" className="item">
                    
                            {
                        getFieldDecorator('cateName',{
                            initialValue:"",
                            rules:[
                                
                                {required: true, whitespace: true, message: "类目信息"},
                                {max: 30, message: "字段长度信息不能多于30个字符"},
                                {pattern:new RegExp(/^[\w\u4E00-\u9FA5]{1,}$/,"g"),message:"需要输入符合规范的类目信息"}

                            ]
                        })(
                            
                            <Input className='input'/>
                        )
                        }

                    </Item>
                    <Item name="tagCode" label="标签英文名称" className="item">
                        {
                        getFieldDecorator('tagCode',{
                            initialValue:"",
                            rules:[
                                {required: true, whitespace: true, message: "标签英文名称"},
                                {max: 24, message: "标签英文名称不能多于24个字符"},
                                {pattern:new RegExp(/^[a-zA-Z_][0-9a-zA-Z_]*$/,"g"),message:"只允许填写数字、字母和下划线"}

                            ]
                        })(
                            <Input className='input'/>
                        )
                        }
                    </Item>
                    <Item  name="tagName" label="标签名称" className="item">
                    
                         {
                        getFieldDecorator('tagName',{
                            initialValue:"",
                            rules:[
                                
                                {required: true, whitespace: true, message: "标签名称"},
                                {max: 200, message: "字段长度信息不能多于200个字符"},
                                {pattern:new RegExp(/^[\w\u4E00-\u9FA5]{1,}$/,"g"),message:"需要输入符合规范的标签名称"}
                            ]
                        })(
                            <Input className='input'/>
                        )
                        }

                    </Item>
                    

                    <Item  className='button'>
                        <Button type="primary" htmlType="submit"  className="form-submit" onClick={this.handleSubmit}>
                            添加
                        </Button>
                    </Item>
                </Form>
           )
    }
}

const WrapperForm = Form.create()(AssetTagAddForm)
export default WrapperForm